<template>
  <div>
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-form-item label="更新时间">
          {{nowTimes.year}}-{{nowTimes.mouth}}-{{nowTimes.day}} {{nowTimes.hou}}:{{nowTimes.min}}:{{nowTimes.sec}}
        </el-form-item>

        <el-row>
          <el-form-item prop="channel" label="渠道">
            <el-select v-model="filters.channel" placeholder="渠道" style="width:215px">
              <el-option label="全部" value="0"></el-option>
              <el-option label="BBC" value="1"></el-option>
              <el-option label="天猫" value="2"></el-option>
              <el-option label="京东" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="merchant" label="商家">
            <el-select v-model="filters.merchant" placeholder="商家" style="width:215px">
              <el-option label="全部" value="0"></el-option>
              <el-option label="录屏商家02" value="1"></el-option>
              <el-option label="录屏商家01" value="2"></el-option>
              <el-option label="测试商家" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="store" label="店铺">
            <el-select v-model="filters.store" placeholder="店铺" style="width:215px">
              <el-option label="全部" value="0"></el-option>
              <el-option label="京东店" value="1"></el-option>
              <el-option label="育学园天猫旗舰店" value="2"></el-option>
              <el-option label="录屏店铺" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="find()"
            />
          </el-form-item>
        </el-row>

      </el-form>
    </div>

    <div class="block-container">
      <div class="block-content">
        <div class="block-item-3" id="chart1" :class="[isActive?'change':'changs']" @mouseleave="changeIt()" @mouseenter="changeIt()"></div>
        <div class="block-item-3" id="chart2" :class="[isActive2?'change':'changs']" @mouseleave="changeIt2()" @mouseenter="changeIt2()"></div>
      </div>

      <div class="block-content">
        <div class="block-item-4" id="chart3" :class="[isActive3?'change':'changs']" @mouseleave="changeIt3()" @mouseenter="changeIt3()"></div>
        <div class="block-item-4" id="chart4" :class="[isActive4?'change':'changs']" @mouseleave="changeIt4()" @mouseenter="changeIt4()"></div>
      </div>

      <div class="block-content">
        <div class="block-item-5" id="chart5" :class="[isActive5?'change':'changs']" @mouseleave="changeIt5()" @mouseenter="changeIt5()"></div>
        <div class="block-item-5" id="chart6" :class="[isActive6?'change':'changs']" @mouseleave="changeIt6()" @mouseenter="changeIt6()"></div>
      </div>

      <div class="block-content">
        <div class="block-item-5" id="chart7" :class="[isActive7?'change':'changs']" @mouseleave="changeIt7()" @mouseenter="changeIt7()"></div>
        <div class="block-item-5" id="chart8" :class="[isActive8?'change':'changs']" @mouseleave="changeIt8()" @mouseenter="changeIt8()"></div>
      </div>

      <div class="block-content">
        <div class="block-item-5" id="chart9" :class="[isActive9?'change':'changs']" @mouseleave="changeIt9()" @mouseenter="changeIt9()"></div>
        <div class="block-item-5" id="chart10" :class="[isActive10?'change':'changs']" @mouseleave="changeIt10()" @mouseenter="changeIt10()"></div>
      </div>

      <div class="block-content">
        <div class="block-item-5" id="chart11" :class="[isActive11?'change':'changs']" @mouseleave="changeIt11()" @mouseenter="changeIt11()"></div>
        <div class="block-item-5" id="chart12" :class="[isActive12?'change':'changs']" @mouseleave="changeIt12()" @mouseenter="changeIt12()"></div>
      </div>


      <div class="block-content">
        <div class="block-item-bottom" id="lineChart"></div>
      </div>
    </div>


  </div>
</template>

<script>
  import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";

  export default {
    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        nowTimes:{
          year: 0,
          mouth:"00",
          day:"00",
          hou:"00",
          min:"00",
          sec:"00"
        },
        totalSize: 0,
        content: [],
        // 分页信息
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        },
        isActive: true,
        isActive2:true,
        isActive3: true,
        isActive4:true,

        isActive5: true,
        isActive6:true,
        isActive7:true,
        isActive8:true,

        isActive9:true,
        isActive10:true,
        isActive11:true,
        isActive12:true,
        size: "small",
        filters: {
          code: "",
          name: "",
          status: "",
          res: {
            "total": 1,
            "code": "0000",
            "rows": [{
              "code": "OS190922110835123857",
              "name": "拆单规则",
              "priority": 1,
              "status": "可用"
            }]
          }
        },
        mychartdata: ['BBC', '天猫', '京东'],
        mycharseriesdata: [{value: 335, name: 'BBC'}, {value: 335, name: '天猫'}, {value: 335, name: '京东'}],

        mylineLegend: ['昨天', '今天'],
        mylineseriesdatas:[{name:'昨天',data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
            3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]},
          {name:'今天',data:[3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7,
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]}],
        mylineXAxisData: ["0:00", "1:00", "2:00", "3:00", "4:00", "5:00", "6:00","7:00", "8:00", "9:00", "10:00", "11:00", "12:00",
          "13:00", "14:00", "15:00", "16:00","17:00", "18:00", "19:00", "20:00", "21:00", "22:00","23:00"]
      }
    },
    methods: {
      setNowTimes: function (){
        let myDate = new Date();
        this.nowTimes.year = myDate.getFullYear();
        this.nowTimes.month = myDate.getMonth()+1<10 ? "0"+(myDate.getMonth()+1) : myDate.getMonth()+1;
        this.nowTimes.day = String(myDate.getDate()<10?'0'+ myDate.getDate(): myDate.getDate()) ;
        this.nowTimes.hou = String(myDate.getHours()<10?"0"+myDate.getHours():myDate.getHours());
        this.nowTimes.min = String(myDate.getMinutes()<10?'0'+myDate.getMinutes():myDate.getMinutes());
        this.nowTimes.sec = String(myDate.getSeconds()<10?'0'+myDate.getSeconds():myDate.getSeconds());
      },

      timerNowTimes: function (){
        let this_ = this; // 声明一个变量指向Vue实例this，保证作用域一致
        this_.timer =setInterval( ()=>{
          this_.setNowTimes();
        },5000);
      },
      find:function () {
        this.$mychart.mycookie('chart1', this.mychartdata, this.mycharseriesdata, "PV 1,625");
        this.$mychart.mycookie('chart2', this.mychartdata, this.mycharseriesdata, "商详页UV 0");
        this.$mychart.mycookie('chart3', this.mychartdata, this.mycharseriesdata, "购物车UV 0");
        this.$mychart.mycookie('chart4', this.mychartdata, this.mycharseriesdata, "成交订单数 0");

        this.$mychart.mycookie('chart5', this.mychartdata, this.mycharseriesdata, "二跳率 0");
        this.$mychart.mycookie('chart6', this.mychartdata, this.mycharseriesdata, "商详页转化率 0");
        this.$mychart.mycookie('chart7', this.mychartdata, this.mycharseriesdata, "新注册客户数 33");
        this.$mychart.mycookie('chart8', this.mychartdata, this.mycharseriesdata, "活跃会员数 91");

        this.$mychart.mycookie('chart9', this.mychartdata, this.mycharseriesdata, "复购率 28.57%");
        this.$mychart.mycookie('chart10', this.mychartdata, this.mycharseriesdata, "注册会员数 8,214,955");
        this.$mychart.mycookie('chart11', this.mychartdata, this.mycharseriesdata, "沉默会员数 0");
        this.$mychart.mycookie('chart12', this.mychartdata, this.mycharseriesdata, "注册一周内未成交客户数 60");

      },
      click1:function () {
        this.$mychart.mycookie('chart1', this.mychartdata, this.mycharseriesdata, "PV 2,625");
        this.$mychart.mycookie('chart2', this.mychartdata, this.mycharseriesdata, "商详页UV 2");
        this.$mychart.mycookie('chart3', this.mychartdata, this.mycharseriesdata, "购物车UV 2");
        this.$mychart.mycookie('chart4', this.mychartdata, this.mycharseriesdata, "成交订单数 2");

        this.$mychart.mycookie('chart5', this.mychartdata, this.mycharseriesdata, "二跳率 2");
        this.$mychart.mycookie('chart6', this.mychartdata, this.mycharseriesdata, "商详页转化率 2");
        this.$mychart.mycookie('chart7', this.mychartdata, this.mycharseriesdata, "新注册客户数 33");
        this.$mychart.mycookie('chart8', this.mychartdata, this.mycharseriesdata, "活跃会员数 91");

        this.$mychart.mycookie('chart9', this.mychartdata, this.mycharseriesdata, "复购率 28.57%");
        this.$mychart.mycookie('chart10', this.mychartdata, this.mycharseriesdata, "注册会员数 8,214,955");
        this.$mychart.mycookie('chart11', this.mychartdata, this.mycharseriesdata, "沉默会员数 0");
        this.$mychart.mycookie('chart12', this.mychartdata, this.mycharseriesdata, "注册一周内未成交客户数 60");

      },
      click2:function () {
        this.$mychart.mycookie('chart1', this.mychartdata, this.mycharseriesdata, "PV 3,625");
        this.$mychart.mycookie('chart2', this.mychartdata, this.mycharseriesdata, "商详页UV 3");
        this.$mychart.mycookie('chart3', this.mychartdata, this.mycharseriesdata, "购物车UV 3");
        this.$mychart.mycookie('chart4', this.mychartdata, this.mycharseriesdata, "成交订单数 3");

        this.$mychart.mycookie('chart5', this.mychartdata, this.mycharseriesdata, "二跳率 3");
        this.$mychart.mycookie('chart6', this.mychartdata, this.mycharseriesdata, "商详页转化率 3");
        this.$mychart.mycookie('chart7', this.mychartdata, this.mycharseriesdata, "新注册客户数 33");
        this.$mychart.mycookie('chart8', this.mychartdata, this.mycharseriesdata, "活跃会员数 91");

        this.$mychart.mycookie('chart9', this.mychartdata, this.mycharseriesdata, "复购率 28.57%");
        this.$mychart.mycookie('chart10', this.mychartdata, this.mycharseriesdata, "注册会员数 8,214,955");
        this.$mychart.mycookie('chart11', this.mychartdata, this.mycharseriesdata, "沉默会员数 0");
        this.$mychart.mycookie('chart12', this.mychartdata, this.mycharseriesdata, "注册一周内未成交客户数 60");

      },
      click3:function () {
        this.$mychart.mycookie('chart1', this.mychartdata, this.mycharseriesdata, "PV 4,625");
        this.$mychart.mycookie('chart2', this.mychartdata, this.mycharseriesdata, "商详页UV 4");
        this.$mychart.mycookie('chart3', this.mychartdata, this.mycharseriesdata, "购物车UV 4");
        this.$mychart.mycookie('chart4', this.mychartdata, this.mycharseriesdata, "成交订单数 4");

        this.$mychart.mycookie('chart5', this.mychartdata, this.mycharseriesdata, "二跳率 4.5");
        this.$mychart.mycookie('chart6', this.mychartdata, this.mycharseriesdata, "商详页转化率 4.8");
        this.$mychart.mycookie('chart7', this.mychartdata, this.mycharseriesdata, "新注册客户数 33");
        this.$mychart.mycookie('chart8', this.mychartdata, this.mycharseriesdata, "活跃会员数 91");

        this.$mychart.mycookie('chart9', this.mychartdata, this.mycharseriesdata, "复购率 28.57%");
        this.$mychart.mycookie('chart10', this.mychartdata, this.mycharseriesdata, "注册会员数 8,214,955");
        this.$mychart.mycookie('chart11', this.mychartdata, this.mycharseriesdata, "沉默会员数 0");
        this.$mychart.mycookie('chart12', this.mychartdata, this.mycharseriesdata, "注册一周内未成交客户数 60");

      },
      // 换页刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        // this.init();
      },
      // 换页刷新
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.pageRequest.pageNum = 1;
        // this.init();
      },
      mouseEnter: function () {
        var dvObj = document.getElementById("div1");

        console.log("--------------------");
        console.log(dvObj);

        dvObj.style.border = "background-color:#000000;";
      },
      changeIt: function () {
        this.isActive = !this.isActive;
      },
      changeIt2: function () {
        this.isActive2 = !this.isActive2;
      },
      changeIt3: function () {
        this.isActive3 = !this.isActive3;
      },
      changeIt4: function () {
        this.isActive4 = !this.isActive4;
      },
      changeIt5: function () {
        this.isActive5 = !this.isActive5;
      },
      changeIt6: function () {
        this.isActive6 = !this.isActive6;
      },
      changeIt7: function () {
        this.isActive7 = !this.isActive7;
      },
      changeIt8: function () {
        this.isActive7 = !this.isActive7;
      },
      changeIt9: function () {
        this.isActive8 = !this.isActive8;
      },
      changeIt10: function () {
        this.isActive9 = !this.isActive9;
      },
      changeIt11: function () {
        this.isActive11 = !this.isActive11;
      },
      changeIt12: function () {
        this.isActive12 = !this.isActive12;
      }
    },
    mounted() {
      this.$mychart.mycookie('chart1', this.mychartdata, this.mycharseriesdata, "成交客户数 4");
      this.$mychart.mycookie('chart2', this.mychartdata, this.mycharseriesdata, "成交订单金额 13.03");
      this.$mychart.mycookie('chart3', this.mychartdata, this.mycharseriesdata, "客单价 1.86");
      this.$mychart.mycookie('chart4', this.mychartdata, this.mycharseriesdata, "UV 38");

      this.$mychart.mycookie('chart5', this.mychartdata, this.mycharseriesdata, "新客数 1");
      this.$mychart.mycookie('chart6', this.mychartdata, this.mycharseriesdata, "新客成交金额 0.01");
      this.$mychart.mycookie('chart7', this.mychartdata, this.mycharseriesdata, "新注册客户数 33");
      this.$mychart.mycookie('chart8', this.mychartdata, this.mycharseriesdata, "活跃会员数 91");

      this.$mychart.mycookie('chart9', this.mychartdata, this.mycharseriesdata, "复购率 28.57%");
      this.$mychart.mycookie('chart10', this.mychartdata, this.mycharseriesdata, "注册会员数 8,214,955");
      this.$mychart.mycookie('chart11', this.mychartdata, this.mycharseriesdata, "沉默会员数 0");
      this.$mychart.mycookie('chart12', this.mychartdata, this.mycharseriesdata, "注册一周内未成交客户数 60");

      this.timerNowTimes();

      this.$mychart.myLineChartMutSmooth('lineChart',this.mylineLegend,this.mylineXAxisData, this.mylineseriesdatas, "下单金额");

    },

    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
      }
    }
  }
</script>

<style scoped>
  /*#chart1 {*/
  /*width: 300px;*/
  /*height: 300px;*/
  /*}*/
  .change {
    /*display:inline-block;*/
    /*text-align:left;*/
    /*background-color: #FFFFFF;*/
    /*margin: 10px;*/
  }

  .changs {
    /*display:inline-block;*/
    /*text-align:left;*/
    border: 1px solid #a6d9ff;
    /*background-color: #FFFFFF;*/
    /*margin: 10px;*/
  }



  .block-container {
    height: 1840px;

    /*width: 100%;*/
    background-color:#F0F3F4;
  }

  .block-title {
    text-align: center;
  }

  /* 父元素 */
  .block-content {
    font-size: 0;  /* 解决 inline-block 布局会出现多余间隙 */
    /*max-width: 1200px;*/
    margin: 0 auto;
  }

  .block-content .block-item-bottom,
  .block-content .block-item-3,
  .block-content .block-item-4,
  .block-content .block-item-5,
  .block-content .block-item-6{
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    transition: all .4s ease;
    vertical-align: top; /* 设置顶部对齐 */
    font-size: 14px;
  }

  /* 3 列 */
  .block-content .block-item-3 {
    /*width: 45%;  !*  width: 32%;  *!*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

  /* 4 列 */
  .block-content .block-item-4 {
    /*width: 22%;   !* width: 23.5%; *!*/
    /*margin: 10px;  !*  margin-left: 2%;  *!*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

  /* 5 列 */
  .block-content .block-item-5 {
    /*width: 18%;*/
    /*margin: 10px;*/
    /*margin-left: 2.5%;*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

  /* 6 列 */
  .block-content .block-item-6 {
    /*margin: 10px;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 98%;
    margin-top: 20px;
    margin-left: 2%;
    margin-bottom: 30px;
    cursor: pointer;
  }

  /* 底 列 */
  .block-content .block-item-bottom {
    /*margin: 10px;*/
    background: #ffffff;
    text-align: center;
    height: 400px;
    width: 98%;
    margin-top: 20px;
    margin-left: 2%;
    margin-bottom: 30px;
    cursor: pointer;
  }

  /* 首列左边距设为0 */
  .block-content .block-item-3:first-child,
  .block-content .block-item-4:first-child,
  .block-content .block-item-5:first-child,
  .block-content .block-item-6:first-child {
    margin-left: 0;
  }

</style>
